@extends('layouts._app')
@section('content')
    <link rel="stylesheet" href="{{asset('static/fullcalendar/css/fullcalendar.css')}}">
    <link rel="stylesheet" href="{{asset('static/fullcalendar/css/fullcalendar.print.css')}}">
    <link rel="stylesheet" href="{{asset('static/colpick/css/colpick.css')}}">
    <style>
        .fr {
            float: right;
        }

        .calendarWrapper {
            width: 1190px;
            margin: 0 auto 15px;
        }

        #calendar {
            width: 885px;
            background: #fff;
        }

        .calendarWrapper .rightSidePanel {
            width: 240px;
        }

        .transparent {
            width: 240px;
        }

        .widget-box.transparent {
            border: 0;
            box-shadow: none;
        }

        .transparent {
            width: 240px;
        }

        .widget-box.transparent > .widget-header {
            background: 0;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            border: 0;
            border-bottom: 1px solid #dce8f1;
            color: #4383b4;
            padding-left: 3px;
        }

        .widget-header {
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            position: relative;
            min-height: 38px;
            background: #f7f7f7;
            background-image: -webkit-gradient(linear, left 0, left 100%, from(#fff), to(#eee));
            background-image: -webkit-linear-gradient(top, #fff, 0%, #eee, 100%);
            background-image: -moz-linear-gradient(top, #fff 0, #eee 100%);
            background-image: linear-gradient(to bottom, #fff 0, #eee 100%);
            background-repeat: repeat-x;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
            color: #669fc7;
            border: 1px solid #CCC;
            border-bottom: 1px solid #DDD;
            padding-left: 12px;
        }

        .widget-header .widget-header > :first-child {
            line-height: 36px;
            padding: 0;
            margin: 0;
            display: inline;
        }

        h4 {
            font-size: 18px;
            font-weight: normal;
            font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        .external-event {
            margin: 6px 0;
            padding: 0;
            display: flex;
            color: #FFF;
            background-color: #abbac3;
            font-size: 13px;
            line-height: 32px;
            cursor: pointer;
        }

        .label-danger {
            background-color: #d15b47 !important;
        }

        .label-grey {
            background-color: #a0a0a0 !important;
        }

        .label-success {
            background-color: #82af6f !important;
        }

        .label-purple {
            background-color: #9585bf !important;
        }

        .label-yellow {
            color: #963 !important;
            border-color: #fee188;
            background-color: #fee188;
        }

        .label-pink {
            background-color: #d6487e !important;
        }

        .label-info {
            background-color: #3a87ad !important;
        }

        .icon-move {
            display: inline-block;
            height: 32px;
            width: 32px;
            text-align: center;
            line-height: 30px;
            margin-right: 5px;
            font-size: 15px;
            border-right: 1px solid #FFF;
            background: url(/static/admin/icon/move.png) no-repeat center;
            background-size: 20px;
        }

        .limiterBox {
            border: 1px solid #222;
            border-top: 0;
            background-color: #333;
            padding: 3px 6px;
            font-size: 12px;
            color: #FFF;
            margin-top: 6px;
        }

        .limiterBox:before {
            display: block;
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            top: -8px;
            left: 50%;
            margin-left: -5px;
            border-color: transparent;
            border-style: solid;
            border-bottom-color: #333;
            border-width: 0 8px 8px;
        }

        #pickers {
            position: absolute;
            top: 20%;
            z-index: 30000000;
            right: 20px;
        }
    </style>
    <script src="{{asset('static/admin/layui/lay/laydate/laydate.js')}}"></script>
    <body class="iframe-h">
    <div id="addmain" style="display: none;">
        <br>
        <br>
        <form class="layui-form" action="" method="post">
            <div class="layui-form-item">
                {!! Form::label('title','标题：',['class'=>'layui-form-label']) !!}
                <div class="layui-input-inline">
                    {!! Form::text('title','',['id'=>'title','maxlength'=>'30','class'=>'layui-input','placeholder'=>'请输入标题']) !!}
                </div>
            </div>
            <div class="layui-form-item">
                {!! Form::label('allDay','是否全天：',['class'=>'layui-form-label']) !!}
                <div class="layui-input-inline">
                    <input type="radio" name="allDay" value="1" title="是">
                    <input type="radio" name="allDay" value="2" title="否">
                </div>
            </div>
            <div class="layui-form-item">
                {!! Form::label('color','颜色：',['class'=>'layui-form-label','maxlength'=>'30']) !!}
                <div class="layui-input-inline">
                    {!!  Form::text('color','',['class'=>'layui-input','id'=>'color']) !!}
                </div>
            </div>
            <div class="layui-form-item">
                {!! Form::label('start','开始事件：',['class'=>'layui-form-label']) !!}
                <div class="layui-input-inline">
                    {!!  Form::text('start','',['class'=>'layui-input','id'=>'start']) !!}
                </div>
            </div>
            <div class="layui-form-item" style="display: none;">
                {!! Form::label('end','结束事件：',['class'=>'layui-form-label']) !!}
                <div class="layui-input-inline">
                    {!!  Form::text('end','',['class'=>'layui-input','id'=>'end']) !!}
                </div>
            </div>
            <div class="layui-form-item">
                {!! Form::label('content','内容：',['class'=>'layui-form-label']) !!}
                <div class="layui-input-inline">
                    {!!  Form::textarea('content','日程详情！！！',['class'=>'layui-textarea','rows'=>'3','id'=>'content']) !!}
                </div>
            </div>
        </form>
        <div id="pickers">
            <div id="picker"></div>
        </div>
    </div>
    <br>
    <div class="calendarWrapper">
        <!-- PAGE CONTENT BEGINS -->
        <div class="rightSidePanel mb50 fr">
            <div id="div_day_detail" class="h_calendar_alm">
                <div class="alm_date"></div>
                <div class="alm_content nofestival">
                    <div class="today_icon"></div>
                    <div class="today_date"></div>
                    <p id="alm_cnD"></p>
                    <p id="alm_cnY"></p>
                    <p id="alm_cnA"></p>
                    <div class="alm_lunar_date"></div>
                </div>
            </div>
            <br>
            <hr>
            <div class="widget-box transparent">
                <div class="widget-header">
                    <h4>可拖动的事件</h4>
                </div>

                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <div id="external-events">
                            <div class="external-event label-grey" data-class="#a0a0a0">
                                <i class="icon-move"></i>
                                <span>
                            我的活动 1
                            </span>
                            </div>

                            <div class="external-event label-success" data-class="#82af6f">
                                <i class="icon-move"></i>
                                我的活动 2
                            </div>

                            <div class="external-event label-danger" data-class="#d15b47">
                                <i class="icon-move"></i>
                                我的活动 3
                            </div>

                            <div class="external-event label-purple" data-class="#9585bf">
                                <i class="icon-move"></i>
                                我的活动 4
                            </div>

                            <div class="external-event label-yellow" data-class="#fee188">
                                <i class="icon-move"></i>
                                我的活动 5
                            </div>

                            <div class="external-event label-pink" data-class="#d6487e">
                                <i class="icon-move"></i>
                                我的活动 6
                            </div>

                            <div class="external-event label-info" data-class="#3a87ad">
                                <i class="icon-move"></i>
                                我的活动 7
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div id="calendar" class="fc fc-ltr"></div>
    </div>
    <script src="{{asset('static/admin/layui/layui.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('static/admin/js/common.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('js/jquery.min.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('static/limiter/js/limiter.min.js')}}"></script>
    <script src="{{asset('static/custom/js/custom.min.js')}}"></script>
    <script src="{{asset('static/fullcalendar/js/fullcalendar.min.js')}}"></script>
    <script src="{{asset('static/colpick/js/colpick.js')}}"></script>
    <script src="{{asset('js/common.js')}}"></script>
    <script>
        layui.use(['form', 'jquery', 'dialog'], function () {
            var form = layui.form(),
                dialog = layui.dialog,
                $ = layui.jquery;
            /** 当天信息初始化 **/
            jQuery(function ($) {
                var dayDate = new Date();
                var ds = $.fullCalendar.formatDate(dayDate, "dddd");
                var ms = $.fullCalendar.formatDate(dayDate, "yyyy年MM月dd日");
                var lunarDate = lunar(dayDate);
                $(".alm_date").html(ms + "&nbsp;" + ds);
                $(".today_date").html(dayDate.getDate())
                $("#alm_cnD").html("农历" + lunarDate.lMonth + "月" + lunarDate.lDate);
                $("#alm_cnY").html(lunarDate.gzYear + "年&nbsp;" + lunarDate.gzMonth + "月&nbsp;" + lunarDate.gzDate + "日");
                $("#alm_cnA").html("【" + lunarDate.animal + "年】");
                var fes = lunarDate.festival();
                if (fes.length > 0) {
                    $(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
                    $(".alm_lunar_date").show();
                } else {
                    $(".alm_lunar_date").hide();
                }

                $('#external-events div.external-event').each(function () {

                    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                    // it doesn't need to have a start or end
                    var eventObject = {
                        title: $.trim($(this).text()) // use the element's text as the event title
                    };

                    // store the Event Object in the DOM element so we can get to it later
                    $(this).data('eventObject', eventObject);

                    $(this).draggable({
                        zIndex: 999,
                        revert: true,      // will cause the event to go back to its
                        revertDuration: 0  //  original position after the drag
                    });

                });

                var calendar = $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,today,next',
                        center: 'prevYear,title,nextYear',
                        right: 'agendaDay,agendaWeek,month'
                    },
                    buttonText: {
                        prev: "<span class='fc-text-arrow'>&lsaquo;上一页</span>",
                        next: "<span class='fc-text-arrow'>下一页&rsaquo;</span>",
                        prevYear: "<span class='fc-text-arrow'>&laquo;上一年</span>",
                        nextYear: "<span class='fc-text-arrow'>下一年&raquo;</span>"
                    },
                    navLinks: true,
                    editable: true,
                    eventLimit: true,
                    allDaySlot: true,
                    allDayText: '全天',
                    slotMinutes: 30,
                    //获取
                    events: '{{route('expansion.fullCalendar.calendar')}}',
                    /**
                     * 新增
                     */
                    droppable: true, // this allows things to be dropped onto the calendar !!!
                    drop: function (date, allDay, revertFunc) { // this function is called when something is dropped
                        // retrieve the dropped element's stored Event Object
                        var originalEventObject = $(this).data('eventObject');
                        var $extraEventClass = $(this).attr('data-class');
                        var copiedEventObject = $.extend({}, originalEventObject);
                        copiedEventObject.start = date;
                        copiedEventObject.allDay = allDay;
                        if ($extraEventClass) copiedEventObject['backgroundColor'] = [$extraEventClass];
                        var data = [];
                        var start = copiedEventObject.start + '';
                        start = start.replace(/ GMT.+$/, '');// Or str = str.substring(0, 24)
                        var w = new Date(start);
                        var c = [w.getFullYear(), w.getMonth() + 1, w.getDate(), w.getHours(), w.getMinutes(), w.getSeconds()];
                        for (var s = 0, lens = s.length; s < lens; s++) {
                            if (c[s] < 10) {
                                c[s] = '00' + c[s];
                            }
                        }
                        data.start = c[0] + '-' + c[1] + '-' + c[2] + ' ' + c[3] + ':' + c[4] + ':' + c[5];
                        data.title = copiedEventObject.title;
                        data.color = copiedEventObject.backgroundColor[0];
                        $.ajax({
                            type: 'post',
                            url: '{{route('expansion.fullCalendar.store')}}',
                            dataType: 'json',
                            data: {
                                start: data.start,
                                title: data.title,
                                color: data.color,
                            },
                            beforeSend: function () {
                                layer.load(1, {
                                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                                });
                            },
                            error: function (xhr) {//获取ajax的错误信息
                                layer.alert(xhr.responseText, "Failed", function () {
                                    layer.closeAll();
                                });
                            },
                            complete: function (XHR) {
                                XHR = null;
                            },
                            success: function (msg) {
                                layer.closeAll();
                                if (msg.code == 403) {
                                    layer.msg(msg.msg, {icon: 4, time: 3000});
                                }
                                if (msg.code != 200) {
                                    layer.msg(msg.msg, {icon: 5, time: 3000});
                                }
                                copiedEventObject.id = msg.data.id;
                                copiedEventObject['backgroundColor'] = msg.data.backgroundColor;
                                calendar.fullCalendar('renderEvent', copiedEventObject, true);
                            }
                        })
                    }
                    ,
                    //单击事件
                    dayClick: function (dayDate, allDay, jsEvent, view) { //点击单元格事件
                        var d = $.fullCalendar.formatDate(dayDate, "dddd");
                        var m = $.fullCalendar.formatDate(dayDate, "yyyy年MM月dd日");
                        var lunarDate = lunar(dayDate);
                        $(".alm_date").html(m + "&nbsp;" + d);
                        $(".today_date").html(dayDate.getDate())
                        $("#alm_cnD").html("农历" + lunarDate.lMonth + "月" + lunarDate.lDate);
                        $("#alm_cnY").html(lunarDate.gzYear + "年&nbsp;" + lunarDate.gzMonth + "月&nbsp;" + lunarDate.gzDate + "日");
                        $("#alm_cnA").html("【" + lunarDate.animal + "年】");
                        var fes = lunarDate.festival();
                        if (fes.length > 0) {
                            $(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
                            $(".alm_lunar_date").show();
                        } else {
                            $(".alm_lunar_date").hide();
                        }
                        // 当天则显示“当天”标识
                        var now = new Date();
                        if (now.getDate() == dayDate.getDate() && now.getMonth() == dayDate.getMonth() && now.getFullYear() == dayDate.getFullYear()) {
                            $(".today_icon").show();
                        } else {
                            $(".today_icon").hide();
                        }
                    }
                    ,

                    //拖动事件
                    eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
                        var data = [];
                        data.id = event.id;
                        if (event.end) {
                            var str = event.end + '';
                            str = str.replace(/ GMT.+$/, '');// Or str = str.substring(0, 24)
                            var d = new Date(str);
                            var a = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
                            for (var i = 0, len = a.length; i < len; i++) {
                                if (a[i] < 10) {
                                    a[i] = '0' + a[i];
                                }
                            }
                            data.end = a[0] + '-' + a[1] + '-' + a[2] + ' ' + a[3] + ':' + a[4] + ':' + a[5];
                        } else {
                            data.end = '';
                        }
                        data.title = event.title;
                        data.color = event.backgroundColor;
                        var start = event.start + '';
                        start = start.replace(/ GMT.+$/, '');// Or str = str.substring(0, 24)
                        var w = new Date(start);
                        var c = [w.getFullYear(), w.getMonth() + 1, w.getDate(), w.getHours(), w.getMinutes(), w.getSeconds()];
                        for (var s = 0, lens = s.length; s < lens; s++) {
                            if (c[s] < 10) {
                                c[s] = '0' + c[s];
                            }
                        }
                        data.start = c[0] + '-' + c[1] + '-' + c[2] + ' ' + c[3] + ':' + c[4] + ':' + c[5];
                        $.ajax({
                            type: 'put',
                            url: '{{route('expansion.fullCalendar.update')}}',
                            dataType: 'json',
                            data: {
                                active: 'drop',
                                id: data.id,
                                start: data.start,
                                title: data.title,
                                end: data.end,
                                color: data.color,
                                filter: true,
                            },
                            beforeSend: function () {
                                layer.load(1, {
                                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                                });
                            },
                            error: function (xhr) {//获取ajax的错误信息
                                layer.alert(xhr.responseText, "Failed", function () {
                                    layer.closeAll();
                                });
                                revertFunc(); //恢复原状
                            },
                            complete: function (XHR) {
                                XHR = null;
                            },
                            success: function (msg) {
                                layer.closeAll();
                                if (msg.code == 403) {
                                    revertFunc(); //恢复原状
                                    layer.msg(msg.msg, {icon: 4, time: 2000});
                                }
                                if (msg.code != 200) {
                                    revertFunc(); //恢复原状
                                    layer.msg(msg.msg, {icon: 5, time: 3000});
                                }
                            }
                        })
                    }
                    ,
                    //编辑事件
                    eventClick: function (calEvent, jsEvent, view) {
                        $('textarea.layui-textarea').inputlimiter({
                            limit: 300,
                            remText: '还可以输入 %n',
                            limitText: '最多输入 : %n'
                        });

                        $('#picker').colpick({

                            flat: true,

                            layout: 'full',

                            submit: 1,

                            color: calEvent.backgroundColor.substring(1),

                        });

                        $(".colpick_submit").click(function () {
                            var id = $('.colpick_hex_field').text();
                            var color = $('.colpick_hex_field').find('input').val();
                            $("#color").val(id + color);
                        })

                        var data = calEvent;
                        if (calEvent.end) {
                            var str = calEvent.end + '';
                            str = str.replace(/ GMT.+$/, '');// Or str = str.substring(0, 24)
                            var d = new Date(str);
                            var a = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
                            for (var i = 0, len = a.length; i < len; i++) {
                                if (a[i] < 10) {
                                    a[i] = '0' + a[i];
                                }
                            }
                            data.end = a[0] + '-' + a[1] + '-' + a[2] + ' ' + a[3] + ':' + a[4] + ':' + a[5];
                        } else {
                            data.end = '';
                        }

                        var start = calEvent.start + '';
                        start = start.replace(/ GMT.+$/, '');// Or str = str.substring(0, 24)
                        var w = new Date(start);
                        var c = [w.getFullYear(), w.getMonth() + 1, w.getDate(), w.getHours(), w.getMinutes(), w.getSeconds()];
                        for (var s = 0, lens = s.length; s < lens; s++) {
                            if (c[s] < 10) {
                                c[s] = '0' + c[s];
                            }
                        }
                        data.start = c[0] + '-' + c[1] + '-' + c[2] + ' ' + c[3] + ':' + c[4] + ':' + c[5];
                        var end = $("#end");
                        var content = $("#content");
                        $("#title").val(data.title);
                        content.val(data.content);
                        $("#start").val(data.start);
                        end.val(data.end);
                        $("#color").val(data.backgroundColor);
                        if (data.allDay === true) {
                            $('input:radio[value=1]').attr('checked', true);
                            end.parents('div.layui-form-item').attr('style', 'display:none');
                        } else {
                            $('input:radio[value=2]').attr('checked', true);
                            end.parents('div.layui-form-item').attr('style', 'display:block');
                        }
                        form.on('radio', function (data) {
                            if (data.value == 1) {
                                end.parents('div.layui-form-item').attr('style', 'display:none');
                            } else {
                                end.parents('div.layui-form-item').attr('style', 'display:block');
                            }
                        })

                        form.render();

                        laydate.render({
                            elem: '#start', //指定元素
                            event: 'click', //触发事件
                            type: 'datetime', //触发事件
                            istime: true, //是否开启时间选择
                            isclear: true, //是否显示清空
                            istoday: true, //是否显示今天
                            issure: true, //是否显示确认
                            festival: true,//是否显示节日
                            fixed: false, //是否固定在可视区域
                            zIndex: 99999999, //css z-index
                        });
                        laydate.render({
                            elem: '#end', //指定元素
                            event: 'click', //触发事件
                            type: 'datetime', //触发事件
                            istime: true, //是否开启时间选择
                            isclear: true, //是否显示清空
                            istoday: true, //是否显示今天
                            issure: true, //是否显示确认
                            festival: true,//是否显示节日
                            fixed: false, //是否固定在可视区域
                            zIndex: 99999999, //css z-index
                        });

                        layer.open({
                            type: 1
                            , title: '编辑事件'
                            , time: 0
                            , skin: 'layui-layer-rim'
                            , area: ['700px', '500px']
                            , btn: ['删除', '提交', '关闭']
                            , content: $('#addmain')
                            , yes: function (index, layero) {
                                dialog.confirm({
                                    message: '您确定要删除选中项',
                                    success: function () {
                                        $.ajax({
                                            type: 'POST',
                                            url: '{{route('expansion.fullCalendar.destroy')}}',
                                            dataType: 'json',
                                            data: {
                                                id: data.id,
                                            },
                                            beforeSend: function () {
                                                layer.load(1, {
                                                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                                                });
                                            },
                                            error: function (xhr) {//获取ajax的错误信息
                                                layer.alert(xhr.responseText, "Failed", function () {
                                                    layer.closeAll();
                                                });
                                            },
                                            complete: function (XHR) {
                                                XHR = null;
                                            },
                                            success: function (msg) {
                                                layer.closeAll();
                                                if (msg.code == 403) {
                                                    layer.msg(msg.msg, {icon: 4, time: 2000});
                                                }
                                                if (msg.code != 200) {
                                                    layer.msg(msg.msg, {icon: 5, time: 3000});
                                                }
                                                calendar.fullCalendar('removeEvents', function (ev) {
                                                    return (ev._id == calEvent._id);
                                                })
                                                $("#addmain").attr('style', 'display:none');
                                                layer.close(index)
                                                layer.msg(msg.msg, {icon: 1, time: 3000});
                                            }
                                        })
                                    },
                                    cancel: function () {
                                        return false;
                                    },
                                })
                                return false;
                            }
                            , btn2: function (index, layero, eve) {
                                var info = {
                                    id: data.id,
                                    title: $('#title').val(),
                                    allDay: $('input[name=allDay]:checked').val(),
                                    color: $('#color').val(),
                                    start: $('#start').val(),
                                    end: $('#end').val(),
                                    content: $('#content').val(),
                                };
                                $.ajax({
                                    type: 'PUT',
                                    url: '{{route('expansion.fullCalendar.update')}}',
                                    dataType: 'json',
                                    data: {
                                        data: info,
                                        active: 'edit',
                                        filter: true,
                                    },
                                    beforeSend: function () {
                                        layer.load(1, {
                                            shade: [0.1, '#333333'] //0.1透明度的白色背景
                                        });
                                    },
                                    error: function (xhr) {//获取ajax的错误信息
                                        layer.alert(xhr.responseText, "Failed", function () {
                                            layer.closeAll();
                                        });
                                    },
                                    complete: function (XHR) {
                                        XHR = null;
                                    },
                                    success: function (msg) {
                                        layer.closeAll();
                                        if (msg.code == 403) {
                                            layer.msg(msg.msg, {icon: 4, time: 2000}, function () {
                                                window.location.reload();
                                            });
                                        }
                                        if (msg.code != 200) {
                                            layer.msg(msg.msg, {icon: 5, time: 3000}, function () {
                                                window.location.reload();
                                            });
                                        }
                                        layer.msg(msg.msg, {icon: 1, time: 3000}, function () {
                                            window.location.reload();
                                        });
                                    }
                                })

                                return false;
                            }
                            , btn3: function (index, layero) {
                                window.location.reload();
                                layer.close(index)
                            }
                            , cancel: function (index) {
                                window.location.reload();
                                layer.close(index)
                            },
                        });
                    }
                });

                $("#fc-dateSelect").delegate("select", "change", function () {
                    var fcsYear = $("#fcs_date_year").val();
                    var fcsMonth = $("#fcs_date_month").val();
                    calendar.fullCalendar('gotoDate', fcsYear, fcsMonth);
                })
            });

            form.render();

        });

    </script>
    </body>
@endsection
